<!-- 新增送修-送修信息 -->
<template>
	<Card>
		<template #head>
			<view class="head">
				<view class="left">
					设备信息
				</view>
				<view class="right">
					<u-icon name="clock" color="#409EFF" size="28"></u-icon>
					<text class="text" @click="onDeviceHistory">
						设备历史
					</text>
				</view>
			</view>
		</template>
		<template #body>
			<CellField v-model="formData.num" label="设备编号" @onBlur="onBlurDeviceCode" @onConfirm="onConfirmDeviceCode">
				<template #right>
					<view class="rightIcon">
						<u-icon name="scan" color="#409EFF" size="28"></u-icon>
					</view>
				</template>
			</CellField>
			<CellField v-model="formData.name" label="设备名称" required></CellField>
			<CellItem v-model="formData.type" ref="type" label="设备分类" itemClickType="select-asset"></CellItem>
			<CellField v-model="formData.model" label="设备型号"></CellField>
			<CellField v-model="formData.serialNum" label="设备序列号" required></CellField>
			<CellItem v-model="formData.data" label="设备数据" ref="data" :customActionSheetList="deviceDataAction"></CellItem>
			<CellField v-model="formData.memo" label="设备备注" align="right" type="textarea"></CellField>

			<Popup v-model="popupVisible" title="设备历史">
				<template #headBottom>
					<view class="headBottom">
						<view class="headBottomChild u-flex u-border-bottom u-border-top">
							<view class="left u-flex-1">
								<text class="label-text">累计维修<text class="label-value">123</text>次</text>
							</view>
							<view class="right u-flex-1">
								<text class="label-text">累计维修金额<text class="label-value">1674423</text>元</text>
							</view>
						</view>
					</view>
				</template>

				<u-time-line>
					<u-time-line-item nodeTop="10" v-for="item in 10">
						<template #node>
							<view class="u-node"> </view>
						</template>
						<template #content>
							<view>
								<view class="u-content-time">
									2019-05-08 12:12
								</view>
								<ul class="u-ul">
									<li class="u-item u-flex">
										<text class="u-item-label u-flex-1">维修厂家</text>
										<text class="u-item-value u-flex-4">联想维修</text>
									</li>
									<li class="u-item u-flex">
										<text class="u-item-label u-flex-1">维修金额</text>
										<text class="u-item-value u-flex-4">100000元</text>
									</li>

								</ul>

							</view>
						</template>
					</u-time-line-item>

				</u-time-line>


			</Popup>

		</template>
	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardBaseWrapper.vue'
	import Popup from '@/components/popup/index.vue'
	// import Tree from '@/components/tree/index.js'
	import RepairApi from '@/apis/repair.js'
	export default {
		components: {
			Card,
			Popup,
			// Tree
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {},
		data() {


			return {
				popupVisible: false,

				deviceDataAction: [{
					name: '已备份',
					value: 1
				}, {
					name: '未备份',
					value: 2
				}],
				formData: {
					// 编号
					num: '',
					//名称
					name: '',
					//分类
					type: '',
					//型号
					model: '',
					// 序列号
					serialNum: '',
					//数据
					data: '1',
					// 备注
					memo: ''
				}
			}
		},


		methods: {
			onBlurDeviceCode() {
				console.log('onBlurDeviceCode');
				this.getDeviceData()
			},

			onConfirmDeviceCode() {
				this.getDeviceData()
			},
			async getDeviceData() {
				if (!this.formData.num) {
					return
				}
				let res = await RepairApi.department.getDeviceData(this.formData.num)

				if (res.code == 0) {
					let body = res.body
					if (body) {

						this.formData.name = body?.name || ''
						this.formData.type = body?.assetsType || ''
						this.formData.model = body?.model || ''
						this.formData.serialNum = body?.seriesNumb || ''
						this.formData.data = body?.state || ''
						this.$refs.type.resetInit()
						this.$refs.data.resetInit()
					}
				}
			},
			onDeviceHistory() {
				this.popupVisible = true
			},
			validate() {
				let msg = ''
				let {
					name,
					serialNum
				} = this.formData
				if (name === '') {
					msg = '设备名称不能为空'
				} else if (serialNum == '') {
					msg = '设备序列号不能为空'

				} else {

					msg = ''
				}
				if (!msg) {
					return true
				}
				this.$msg(msg)
				return false


			}
		}
	}
</script>

<style lang="scss" scoped>
	.headBottom {
		margin-top: 30rpx;

		padding: 0 30rpx;

		>.headBottomChild {
			padding: 30rpx 0rpx;

			>.left {}

			>.right {
				text-align: right;
			}
		}

	}




	.u {
		&-node {
			width: 14rpx;
			height: 14rpx;
			background: #409EFF;
			border-radius: 100%;
		}

		&-content {

			&-time {
				font-weight: 400;
				font-size: 28rpx;
				color: #98A5B3;
			}
		}


		&-ul {
			margin-top: 30rpx;
		}

		&-item {
			display: flex;

			&+& {
				margin-top: 20rpx;
			}

			&-label {
				font-weight: 400;
				font-size: 28rpx;
				color: #98A5B3;
			}

			&-value {
				font-weight: 400;
				font-size: 28rpx;
				color: #0F2E4D;
				padding-left: 20rpx;
			}
		}


	}


	.label {

		&-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #98A5B3;
		}

		&-value {
			font-weight: 400;
			font-size: 28rpx;
			color: #0F2E4D;
			margin: 0 10rpx;
		}
	}

	.rightIcon {
		width: 90rpx;
		box-shadow: inset 2rpx 0px 0px 0px #DEE2EE;

		text-align: center;
	}

	.head {
		display: flex;

		>.left {
			flex: 1;
		}

		>.right {
			flex: 1;
			text-align: right;

			>.text {
				font-weight: 400;
				font-size: 28rpx;
				color: #409EFF;

			}
		}
	}
</style>
